<template>
	<view>
		<view>
			<RegisterHeader></RegisterHeader>
		</view>
		<view class="container">
			<view class="register">{{$t('register.register.register')}}</view>
			<view class="register">
				<uni-forms ref="baseForm" :modelValue="alignmentFormData" :label-position="alignment">
					<uni-forms-item :label="$t('register.register.telephone')" required>
						<uni-easyinput v-model="baseFormData.telephone" @input="validatePhoneNumber"
							:placeholder="$t('register.register.telephone')" suffixIcon="checkmarkempty" />
						<p v-if="isValid">手机格式正确</p>
						<p v-else class="errorphone">手机格式错误</p>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" disabled="true" @click="submit('baseForm')">提交</button>
			</view>
			<view class="button-group">
				<button class="button" @click="handleClick1('button1')">下一步输入短信验证码</button>
			</view>
		</view>
		<view>
			<RegisterFooter></RegisterFooter>
		</view>
	</view>
</template>

<script>
	import RegisterHeader from '@/pages/register/components/registerHeader';
	import RegisterFooter from '@/pages/register/components/registerFooter';
	export default {
		components: {
			RegisterHeader,
			RegisterFooter,
		},
		data() {
			return {

				alignment: "top",
				isValid: false,
				// 基础表单数据
				baseFormData: {
					telephone: '',
				},
				// 表单数据
				alignmentFormData: {
					telephone: '',
				},

			}
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			validatePhoneNumber(event) {
				// 使用正则表达式验证手机号格式
				const pattern = /^1[3456789]\d{9}$/;
				console.log(event);
				this.isValid = pattern.test(event);

				console.log(this.isValid);
			},
			handleClick1(buttonName) {
				uni.navigateTo({
					url: '/pages/register/smsVerify'
				});
			}
		}
	}
</script>


<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 20px;
	}

	.register {
		text-align: center;
		width: 100%;
		font-size: xx-large;
	}

	.errorphone {
		color: red;
	}

	.button {
		flex: 1;
		margin: 10px;
		padding: 10px 20px;
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 5px;
	}
</style>